import type { ProColumns } from '@ant-design/pro-components';
import { Button, Tag, Popconfirm } from 'antd';
import React, { useState, useRef } from 'react';
import {
  ProTable,
  PageContainer,
} from '@ant-design/pro-components';
import IHttp from "@/services/http.service";
import VideoCreateForm from "@/pages/Video/UploadList/VideoCreateForm";
import {firstValueFrom, map} from "rxjs";
import IHelper from '@/services/helper.service';

const VideoList: React.FC = () => {
  const ref = useRef<Ant.ProTableActionType>()
  const columns: ProColumns<API.VideoItem>[] = [
    {
      title: '名称',
      dataIndex: 'name',
      render: (_, record) => <a onClick={() => setEditItem({...record})}>{_}</a>,
    },
    {
      title: '封面',
      dataIndex: 'cover',
      render: (_, record) => {
        return <img className='w-8 max-h-8' src={IHelper.getServerAsset(record.cover)} alt="" />
      },
    },
    {
      title: '视频',
      dataIndex: 'video',
      render: (_, record) => {
        return <video className='w-8 max-h-8' src={IHelper.getServerAsset(record.video)} controls={false} />
      },
    },
    {
      title: '操作',
      key: 'option',
      width: 140,
      valueType: 'option',
      render: (_, record) => [
        <a key="pub" className="">发布</a>,
        <Popconfirm
          key="del"
          title="删除账号"
          description="确定要删除当前账号吗？"
          okText="确定"
          cancelText="取消"

          onConfirm={() => {
            return firstValueFrom(
              IHttp.delVideo(record.id).pipe(
                map(() => ref.current?.reload())
              )
            )
          }}
        >
          <a className="text-[#ff4d4f]">删除</a>
        </Popconfirm>,
      ],
    },
  ]
  const [editItem, setEditItem] = useState<API.VideoItem | undefined>()
  const [bindItem, setBindItem] = useState<API.VideoItem | undefined>()
  return (
    <>
      <PageContainer
        title={""}
        content={""}
      >
        <ProTable<API.VideoItem>
          // @ts-ignore
          actionRef={ref}
          columns={columns}
          request={(params, sorter, filter) => {
            // 表单搜索项会从 params 传入，传递给后端接口。
            console.log(params, sorter, filter);
            return firstValueFrom(
              IHttp.getVideoList({page: params.current, pageSize: params.pageSize}).pipe(
                map(res => {
                  return {
                    data: res.data.list,
                    // success 请返回 true，
                    // 不然 table 会停止解析数据，即使有数据
                    success: true,
                    // 不传会使用 data 的长度，如果是分页一定要传
                    total: res.data.total,
                  }
                })
              )
            )
            // return Promise.resolve({
            //   data: tableListDataSource,
            //   success: true,
            // });
          }}
          toolbar={{
            search: {
              onSearch: (value: string) => {
                alert(value);
              },
            },
            actions: [
              <Button type="primary" onClick={() => {
                setEditItem({id: 0, video: "", cover: "", name: ""})
              }}>添加</Button>
            ],
          }}
          rowKey="id"
          search={false}
        />
      </PageContainer>
      <VideoCreateForm
        item={editItem}
        onCancel={() => setEditItem(undefined)}
        onRefreshTable={() => {
          setEditItem(undefined)
          ref.current?.reload()
        }}
      />
    </>

  );
};

export default VideoList;
